<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
    	<span class="iconfont header-abs-back">&#xe624;</span>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
    	<router-link tag="div" to="/">
    	<span class="iconfont header-fixed-back">&#xe624;</span>
    </router-link>
    </div>
  </div>

</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
  	return {
  		showAbs: true,
  		opacityStyle: {
  			opacity: 0
  		}
  	}
  },
  methods: {
  	handleScroll () {
  		console.log('有反应吗')
  		const top = document.documentElement.scrollTop
  		if (top > 60) {
  			let opacity = top / 140
  			opacity = opacity > 1 ? 1 : opacity
  			this.opacityStyle = {
  				opacity
  			}
  			this.showAbs = false
  		} else {
  			this.showAbs = true
  		}
  		console.log(document.documentElement.scrollTop)
  	}
  },
  mounted () {
  	console.log('activated')
  	window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () { // 清除全局绑定
  	window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
 .header-abs
	  position:absolute
	  left: .2rem
	  top: .2rem
	  width: .8rem
	  height: .8rem
	  line-height:.8rem
	  text-align:center
	  border-radius 50%
	  background: rgba(0,0,0,.8)
	  .header-abs-back
	  	color:#fff
	  	font-size:.4rem
	.header-fixed
    position: fixed
    z-index:2
    top:0
    left:0
    right:0
    overflow hidden
    height:$headerHeight
    line-height: $headerHeight
    text-align: center
    color: #ffffff
    background: $bgColor
    font-size:.32rem
    .header-fixed-back
     position: absolute
     top:0
     left:0
     overflow hidden
     padding:0 .2rem
     height:$headerHeight
     line-height: $headerHeight
     text-align: left
     color: #ffffff
     background: $bgColor
     font-size:.32rem
</style>
